<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>请假管理</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link to="/leave/LeaveTypeIndex">请假配置</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-row>
          <a-col :lg="24" :md="24" :sm="24">
            <a-button
              type="primary"
              @click="handleEdit()"
            ><a-icon type="plus" />
              新增
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          :loading="listLoading"
          class="s-table"
          :data-source="list"
          :row-key="record => record.id"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
        >
          <a-table-column
            title="序号"
            data-index="index"
            class="index-td"
            align="center"
          />
          <a-table-column
            title="类型"
            data-index="name"
            align="center"
          />
          <a-table-column
            title="创建时间"
            data-index="createdTime"
            align="center"
          />
          <a-table-column
            title="最后修改时间"
            data-index="updatedTime"
            align="center"
          />

          <!-- fixed="right"-->
          <a-table-column
            key="action"
            title="操作"
            align="center"
          >
            <template slot-scope="text, record">
              <span class="primary-link" @click="handleEdit(record)">  编辑</span>
              <span class="primary-link" @click="handleDelete(record)">删除</span>
            </template>
          </a-table-column>

        </a-table>
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="total => `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(total / listQuery.pageSize)} 页`"
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
    </a-card>

    <LeaveTypeSave
      v-if="edit"
      ref="LeaveTypeSave"
      :data="editForm"
      @refreshDataList="edit = false || getList()"
      @dialogClosed="edit = false"
    />
  </page-view>
</template>
<style>
  .index-td{
    width: 70px;
  }
  .textarea-td{
    width: 31%;
  }
</style>
<script>

import { STable, PageView } from '@/components'
import { del } from '@/pages/leave/api/leaveType'
import LeaveTypeSave from '@/pages/leave/LeaveTypeSave'
export default {
  name: 'LeaveTypeIndex',
  components: {
    STable,
    PageView,
    LeaveTypeSave
  },
  data () {
    return {
      url: '/admin/leave/type/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      editForm: {},
      edit: false,
      downloadLoading: false,
      departmentList: []
    }
  },
  watch: {
    '$route' (t, f) {
      if (this.$get(t, 'name') === 'leave-LeaveTypeIndex') {
        this.getList()
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList()
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
      this.getList()
    },
    handleDownload () {
      // this.downloadLoading = true
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = ['排序', '产品名称', '默认产品单价', '发布人', '发布时间', '状态']
      //   const filterVal = ['sort', 'productName', 'defaultPrice', 'publishTime', 'status']
      //   excel.export_json_to_excel2(tHeader, this.list, filterVal, '产品信息')
      //   this.downloadLoading = false
      // })
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.id, '删除')
    },
    handleEdit (row) {
      row = row || {}
      this.edit = true
      this.editForm = { id: row.id || null, name: row.name || null }
    }
  }
}
</script>
